<template>
  <div>
    <nav-bar>
      <div class="left" slot="left" @click="goBack">
        <i class="iconfont icon-fanhui"></i>
      </div>
      <div slot="center">用户登录</div>
    </nav-bar>
    <div class="register-container">
      <div class="register-img">
        <van-image
            round
            width="100%"
            height="100%"
            src="https://img01.yzcdn.cn/vant/cat.jpeg"
        />
      </div>
      <div class="register-content">
        <van-form @submit="onSubmit">
          <van-field
              v-model="email"
              name="邮箱"
              label="邮箱"
              placeholder="邮箱"
              :rules="[{ required: true, message: '请填写邮箱账号' }]"
          />
          <van-field
              v-model="password"
              type="password"
              name="密码"
              label="密码"
              placeholder="密码"
              :rules="[{ required: true, message: '请填写密码' }]"
          />
          <div style="margin: 16px;">
            <div class="link-login" @click="goRegister">
              没有账号？，立即注册
            </div>
            <van-button class="button" round block type="info" native-type="submit">登录</van-button>
          </div>
        </van-form>
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from '../../components/nav-bar/Nav-Bar'
import {login} from "../../api/user/user";
import { Toast } from 'vant';
export default {
  name: "Login",
  components:{
    NavBar
  },
  data(){
    return{
      email:'', // 邮箱
      password:'', //密码
    }
  },
  methods:{
    goBack(){
      this.$router.go(-1)
    },
    // 提交注册表单
    async onSubmit(){
       Toast.loading({
        message: '登录中...',
        forbidClick: true,
      });
       let loginInfo = {email:this.email,password:this.password}
       const res = await login(loginInfo)
       res.status === 200 ? await this.$router.push({path: '/home'}) && this.$store.commit('setLoginStatus',true) || window.localStorage.setItem('token',res.data.access_token) || Toast.success('登录成功'):Toast.fail('登录失败')
       console.log(res);
    },
    goRegister(){
      this.$router.push({path:'/register'})
    }
  }
}
</script>

<style scoped lang="css">
.left{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.iconfont{
  font-size: 24px;
}
.register-container{
  margin-top: 70px;
  width: 100%;
  height: 100%;
}
.register-img{
  width: 80px;
  height: 80px;
  display: flex;
  justify-content: center;
  margin-left: calc(50% - 40px);
}
.register-content{
  margin-top: 20px;
}
.button{
  background-color: #42bBaa;
  border: 1px solid #42bBaa;
}
.link-login{
  font-size: 14px;
  color: #42bBaa;
  margin-bottom: 20px;
}

</style>